<template>
  <div>
    <div style="text-align:left;display: none">
      <div style="margin-top: 20px">
        <span>请选择月份:</span>
        <el-select v-model="radio" clearable placeholder="请选择" size="mini">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button id="btn_sure" size="mini" @click="fnSure" style="margin-left:20px">查询</el-button>
        <el-button id="btn_reset" size="mini" @click="fnReset">重置</el-button>
      </div>
    </div>
    <div class="charts" style="display:none;">
      <div id="chart_1" :style="{width: '100%', height: '300px'}"></div>
      <div id="chart_2" :style="{width: '50%', height: '300px',float:'left' ,margin:'20px auto'}"></div>
      <div id="chart_3" :style="{width: '50%', height: '300px',float:'right' ,margin:'20px auto'}"></div>
    </div>
    <!-- 统计模块-->
    <hr />
    <div style="text-align:left">
      <div style="margin-top: 20px">
        <el-select v-model="search_year" clearable size="mini" @change="fnSearchYear">
          <el-option v-for="year in years" :key="year.value" :label="year.label" :value="year.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="search_date" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"
                        size="mini" style="margin-left: 100px;" @change="fnSearchDate">
        </el-date-picker>
      </div>
      <div style="margin-top: 20px;float: left;">
        <div class="countShow">
          <div class="div-left" style="background-color:rgb(43, 152, 253);">加班总天数信息</div><br />
          <div class="div-right">加班总天数：{{overtimeDayCount}}</div>
        </div>
        <div class="countShow">
          <div class="div-left" style="background-color: rgb(0,204,255);">加班地点数信息</div><br />
          <div class="div-right">加班地点数：{{overtimePositionCount}}</div>
        </div>
        <div class="countShow">
          <div class="div-left" style="background-color: rgb(0,204,204);">加班项目数信息</div><br />
          <div class="div-right">加班项目数：{{overtimeProjectCount}}</div>
        </div>
        <div class="countShow">
          <div class="div-left" style="background-color: rgb(0,153,204);">加班人员数信息</div><br />
          <div class="div-right">加班人员数：{{overtimePersonCount}}</div>
        </div>
        <div class="countShow">
          <div class="div-left" style="background-color: rgb(51,152,219); ">加班日期信息</div><br />
          <div class="div-right" style="padding-top: 30px;padding-bottom: 70px;">
            <div style="text-align: left;margin:0px 0px 8px 50px;">工作日：{{workdayCount}}</div>
            <div style="text-align: left;margin-left: 50px;">节假日：{{holidayCount}}</div>
          </div>
        </div>
      </div>
      <br /> <br />
      <div style="margin-top: 100px">
        <div class="grid_positon">
          <div class="grid-head">人员统计</div>
          <el-table border :data="data_personCount" height="500">
            <el-table-column prop="name" label="姓名" width="119">
            </el-table-column>
            <el-table-column prop="dayCount" label="天数" width="119">
            </el-table-column>
          </el-table>
        </div>
        <div class="grid_positon">
          <div class="grid-head">报销统计</div>
          <el-table border :data="data_moneyCount" height="500">
            <el-table-column prop="payName" label="姓名" width="119">
            </el-table-column>
            <el-table-column prop="moneyCount" label="金额" width="119">
            </el-table-column>
          </el-table>
        </div>
        <div class="grid_positon">
          <div class="grid-head">项目统计</div>
          <el-table border :data="data_projDayCount" height="500">
            <el-table-column prop="projName" label="项目名称" width="119">
            </el-table-column>
            <el-table-column prop="projDayCount" label="天数" width="119">
            </el-table-column>
          </el-table>
        </div>
        <div class="grid_positon">
          <div class="grid-head">地点统计</div>
          <el-table border :data="data_positionDayCount" height="500">
            <el-table-column prop="position" label="地点" width="119">
            </el-table-column>
            <el-table-column prop="positionDayCount" label="天数" width="119">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'chart',
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        radio: '',
        chart_1: '',
        chart_2: '',
        chart_3: '',
        search_year: '',
        search_date: '',
        overtimeDayCount:'暂无',
        overtimePositionCount:'暂无',
        overtimeProjectCount:'暂无',
        overtimePersonCount:'暂无',
        workdayCount:'暂无',
        holidayCount:'暂无',
        data_personCount:[],
        data_moneyCount:'',
        data_projDayCount:'',
        data_positionDayCount:'',
        options: [{
          value: '01',
          label: '一月'
        }, {
          value: '02',
          label: '二月'
        }, {
          value: '03',
          label: '三月'
        }, {
          value: '04',
          label: '四月'
        }, {
          value: '05',
          label: '五月'
        }, {
          value: '06',
          label: '六月'
        }, {
          value: '07',
          label: '七月'
        }, {
          value: '08',
          label: '八月'
        }, {
          value: '09',
          label: '九月'
        }, {
          value: '10',
          label: '十月'
        }, {
          value: '11',
          label: '十一月'
        }, {
          value: '12',
          label: '十二月'
        }],
        years: [{
          value: '2020',
          label: '2020年'
        }, {
          value: '2019',
          label: '2019年'
        }, {
          value: '2018',
          label: '2018年'
        }, {
          value: '2017',
          label: '2017年'
        }, {
          value: '2016',
          label: '2016年'
        }, {
          value: '2015',
          label: '2015年'
        }, {
          value: '2014',
          label: '2014年'
        }, {
          value: '2013',
          label: '2013年'
        }, {
          value: '2012',
          label: '2012年'
        }, {
          value: '2011',
          label: '2011年'
        }, {
          value: '2010',
          label: '2010年'
        }, {
          value: '2009',
          label: '2009年'
        }],
      }
    },
    mounted() {
      this.chart_1 = this.$echarts.init(document.getElementById("chart_1"));
      this.chart_2 = this.$echarts.init(document.getElementById("chart_2"));
      this.chart_3 = this.$echarts.init(document.getElementById("chart_3"));
      this.funcChart1();
      this.funcChart2();
      this.funcChart3();
      this.setTimeValue();
      this.fnSure();
      this.fnSearchYear('2020');
    },
    created(){
      /*设置年份下拉框初始值*/
      this.search_year = this.years[0].value;
    },
    methods: {
      //初始化赋值
      setTimeValue() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        var start_time = year + "-" + month + "-" + day;
        this.radio = "" + month;
      },
      funcChart1() {
        let options = {
          color: ['#3398DB'],
          title: {
            text: '加班申请天数TOP10',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#ddd', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#333', //坐标值得具体的颜色

              }
            }
          }],
          yAxis: [{
            type: 'value',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#ddd', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#333', //坐标值得具体的颜色
              }
            }
          }],
          series: [{
            name: '加班天数',
            type: 'bar',
            barWidth: '60%',
            data: [],
            itemStyle: {
              normal: {
                shadowBlur: 0,
              }
            }
          }]
        };
        this.chart_1.setOption(options);
      },
      funcChart2() {
        var option = {
          title: {
            text: '报销统计',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: [],
          },
          color: [
            '#2b98fd', '#00CCFF', '#00CCCC', '#0099CC', '#3333FF',
            '#3398DB', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
          ],
          series: [{
            name: '报销统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
              },
              normal: {
                shadowBlur: 10,
              }
            }
          }]
        };
        this.chart_2.setOption(option);
      },
      funcChart3() {

        var option = {
          title: {
            text: '各项目加班情况',
            left: 'center',

          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 50,
            top: 20,
            bottom: 20,
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color: [
            '#2b98fd', '#00CCFF', '#00CCCC', '#0099CC', '#3333FF',
            '#3398DB', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
          ],
          series: [{
            name: '项目加班情况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [

            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            itemStyle: {
              normal: {
                shadowBlur: 10,
              }
            },
          }]
        };
        this.chart_3.setOption(option);
      },
      //查询按钮
      fnSure() {
        this.applicationCount();
        this.expenseCount();
        this.projectCount();
      },
      fnReset() {
        this.radio = '';
        this.funcChart1();
        this.funcChart2();
        this.funcChart3();
      },
      applicationCount() {
        var _this = this;
        this.postRequest("/indexCount/applicationCount", {
          month: this.radio
        }).then(resp => {
          if (resp && resp.status == 200) {
            var resultData = resp.data;
            var xArray = new Array();
            var sArray = new Array();
            for (var i = 0; i < resultData.length; i++) {
              var item = resultData[i];
              xArray.push(item.name);
              sArray.push(item.count);
            }
            this.chart_1.setOption({
              xAxis: {
                data: xArray,
              },
              series: {
                data: sArray,
              }
            });
          }
        })
      },
      expenseCount() {
        this.postRequest("/indexCount/expenseCount", {
          month: this.radio
        }).then(resp => {
          if (resp && resp.status == 200) {
            var resultData = resp.data;
            var legengArray = new Array();
            var sArray = new Array();
            for (var i = 0; i < resultData.length; i++) {
              var item = resultData[i];
              legengArray.push(item.name + "报销金额" + item.count);
              sArray.push({
                "value": item.count,
                "name": item.name + "报销金额" + item.count
              });
            }
            this.chart_2.setOption({
              legend: {
                data: legengArray
              },
              series: {
                data: sArray
              }
            });
          }
        })
      },
      projectCount() {
        this.postRequest("/indexCount/projectCount", {
          month: this.radio
        }).then(resp => {
          if (resp && resp.status == 200) {
            var resultData = resp.data;
            var legengArray = new Array();
            var seriesArray = new Array();
            for (var i = 0; i < resultData.length; i++) {
              var item = resultData[i];
              var str = "";
              if (item.name.length > 10) {
                str = item.name.substring(0, 4);
              } else {
                str = item.name;
              }
              legengArray.push(str + " 加班天数" + item.count);
              seriesArray.push({
                "value": item.count,
                "name": str + " 加班天数" + item.count
              });
            }
            this.chart_3.setOption({
              legend: {
                data: legengArray
              },
              series: {
                data: seriesArray
              },
            });
          }
        })
      },
      /*通过年份查询*/
      fnSearchYear(value){
        var _this = this;
        this.postRequest("/amount/amountCount",{year:value}).then(resp=>{
          if(resp&&resp.status == 200){
            console.log(resp);
            //加班总天数
            _this.overtimeDayCount = resp.data.greyAmount[0].overtimeDayCount;
            //加班总人数
            _this.overtimePersonCount = resp.data.greyAmount[0].overtimePersonCount;
            //加班地点数
            _this.overtimePositionCount = resp.data.greyAmount[0].overtimePositionCount;
            //加班项目数
            _this.overtimeProjectCount = resp.data.greyAmount[0].overtimeProjectCount;
            //工作日
            _this.workdayCount = resp.data.greyAmount[1].workdayCount;
            //节假日
            _this.holidayCount = resp.data.greyAmount[1].holidayCount;
            /*设置数据表格中的值*/
            //报销统计
            _this.data_moneyCount = resp.data.payCount;
            //人员统计
            _this.data_personCount = resp.data.personCount;
            // 地点统计
            _this.data_positionDayCount = resp.data.positionCount;
            // 项目统计
            _this.data_projDayCount = resp.data.projectCount;
          }
        });
      },
      /*通过日期查询*/
      fnSearchDate(value){
        var _this = this;
        var year = value.getFullYear();
        var month = value.getMonth()+1;
        var day = value.getDate();
        if(month<10){
          month='0'+month;
        }
        if(day<10){
          day='0'+day;
        }
        var time = year + "-" + month + "-" + day;
        this.postRequest("/amount/amountCount",{date:time}).then(resp=>{
          if(resp&&resp.status == 200){
            console.log(resp);
            _this.overtimeDayCount = resp.data.greyAmount[0].overtimeDayCount;
            _this.overtimePersonCount = resp.data.greyAmount[0].overtimePersonCount;
            _this.overtimePositionCount = resp.data.greyAmount[0].overtimePositionCount;
            _this.overtimeProjectCount = resp.data.greyAmount[0].overtimeProjectCount;
            _this.workdayCount = resp.data.greyAmount[1].workdayCount;
            _this.holidayCount = resp.data.greyAmount[1].holidayCount;
            /*设置数据表格中的值*/
            _this.data_moneyCount = resp.data.payCount;
            _this.data_personCount = resp.data.personCount;
            _this.data_positionDayCount = resp.data.positionCount;
            _this.data_projDayCount = resp.data.projectCount;
          }
        });
      },
    }
  }
</script>
<style type="text/css">
  .countShow {
    border-radius: 4px;
    text-align: center;
    width: 380px;
    margin-left: 20px;
    margin-bottom: 20px;
    float: left;
    overflow: auto;
    zoom: 1;
  }

  .grid_positon {
    width: 240px;
    margin-left: 40px;
    float: left;
  }

  .div-left {
    border-radius: 4px 0px 0px 4px;
    width: 120px;
    height: 60px;
    text-align: center;
    font-size: 14px;
    padding-top: 40px;
    color: #fff;
    float: left;
  }

  .div-right {
    margin-top: -18px;
    border-radius: 0px 4px 4px 0px;
    width: 260px;
    height: 60px;
    padding-top: 40px;
    padding-bottom: 60px;
    padding-right: 70px;
    background-color: #E4E4E4;
    text-align: center;
    font-size: 15px;
    color: #000000;
    box-sizing: border-box;
    float: left;
  }

  .grid-head {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
  }
</style>
